<script setup>
import { reactive, ref } from 'vue'
import { EditPen, Operation, Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const filterForm = reactive({})
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const list = reactive([
    {
        name: '设备1',
        type: 1,
        id: '001',
    },
    {
        name: '设备2',
        type: 0,
        id: '002',
    },
])
// console.log(list, 'list')
// function getData(page = 1) {
//     loading.value = true
//     const params = Object.assign(
//         {
//             page,
//             limit: pageSize,
//         },
//         filterForm
//     )
// }
function handleCurrentChange() {
    // getData(e)
}
function goListPage(item) {
    router.push(`/safe/alam/deviceList/001?id=${item.id}`)
}
</script>
<template>
    <div class="filter-box white-box d-flex">
        <el-form :inline="true" class="d-flex-1">
            <el-form-item label="设备名称">
                <el-input v-model="filterForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备号">
                <el-input v-model="filterForm.number" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select
                    v-model="filterForm.current_state"
                    placeholder="请选择"
                >
                    <el-option label="正常" value="1" />
                    <el-option label="报警 " value="2" />
                    <el-option label="离线 " value="3" />
                    <el-option label="故障 " value="4" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">新增</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="white-box mt-20 d-flex-1 overflow-auto">
        <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in list" :key="index">
                <div class="equipmenItem white-box border">
                    <div
                        class="type"
                        :style="[
                            item.type == 0
                                ? 'color:#7D7D7D;background:#B5B5B5'
                                : '',
                        ]"
                    >
                        {{ item.type == 0 ? '●离线' : '●在线' }}
                    </div>
                    <div class="fw-b fs-20">网关</div>
                    <div class="d-flex-1 d-flex mt-10">
                        <img
                            class="equipmenItem_icon"
                            src="@/assets/images/icon-device.png"
                        />
                        <div>
                            <div class="ml-10 mb-10">
                                <div class="gray_font mb-3">设备类型</div>
                                <div class="fs-16">网关</div>
                            </div>
                            <div class="ml-10">
                                <div class="gray_font">设备号</div>
                                <div class="fs-16">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-10 operat mb-10 fl-bw">
                    <el-button
                        type="primary"
                        :icon="EditPen"
                        color="#F5F5F6"
                        class="border"
                        small
                        >编辑</el-button
                    >
                    <el-button
                        type="primary"
                        :icon="Operation"
                        color="#F5F5F6"
                        class="border"
                        small
                        >控制</el-button
                    >
                    <el-button
                        type="primary"
                        :icon="EditPen"
                        color="#F5F5F6"
                        class="border"
                        small
                        >数据</el-button
                    >
                    <el-button
                        type="primary"
                        :icon="EditPen"
                        color="#F5F5F6"
                        class="border"
                        small
                        @click="goListPage(item)"
                        >设备</el-button
                    >
                    <el-button
                        :icon="Delete"
                        style="color: red; padding: 5px 10px"
                    />
                </div>
            </el-col>
        </el-row>
        <div class="fl-bw">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<style lang="scss" scoped>
::v-deep(.operat .el-button--primary) {
    color: #1835c3 !important;
    padding: 5px 10px !important;
    font-size: 16px !important;
}
</style>
